<!DOCTYPE html>
<html>

<head>
  <title>webpack「v5.0」基础知识</title>
  <meta charset='utf-8'>
  <link href='https://cdn.maxiang.io/res-min/themes/marxico.css' rel='stylesheet'>
  <style>
    #preview-contents {
      margin-top: -20px;
      width: 1000px;
    }
  </style>
</head>

<body>
  <div id='preview-contents' class='note-content'>
    <h3>webpack「v5.0」基础知识</h3>
    <blockquote>
      <p><a href="https://webpack.docschina.org/" target="_blank">https://webpack.docschina.org/</a> <br>
        webpack是一个现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时，它会在内部构建一个依赖图(dependency [/dɪˈpendənsi/] graph
        [/ɡræf/])，此依赖图会映射项目所需的每个模块，并生成一个或多个bundle /ˈbʌndl/ 包！</p>
    </blockquote>

    <p><strong>为啥要学webpack？</strong></p>
    <p>
      我们平时开发的时候，一般会使用less/sass/stylus等CSS预编译器「需要基于vscode插件把其编译为CSS」；会直接使用ES6的语法「需要基于babel把其转换为ES5，以此兼容IE」；会给CSS3样式加很多的前缀，以此来处理兼容问题……
      <br>
      我们还会基于vscode中的liveserver插件，创建一个本地web服务器，来预览我们的项目….. <br>
      我们还要基于各种方案，来解决跨域访问的问题……
    </p>
    <p>以上所有内容，如果都需要开发者手动去处理，那么…..也就没有那么了！！</p>
    <p><img longdesc="./1668774490745.png" alt="Alt text" title="" type="image/png" width="200"
        src=""
        class=""></p>
    <p><strong>webpack可以帮我们干的事情：</strong></p>
    <ul>
      <li>
        <p>代码转换：TypeScript编译成JavaScript、LESS/SCSS编译成CSS、ES6/7编译为ES5、虚拟DOM编译为真实的DOM等等…</p>
      </li>
      <li>
        <p>文件优化：压缩JS、CSS、HTML代码，压缩合并图片，图片BASE64等</p>
      </li>
      <li>
        <p>代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码等</p>
      </li>
      <li>
        <p>模块合并：把模块分类合并成一个文件</p>
      </li>
      <li>
        <p>自动刷新：创建本地Web服务器，监听本地源代码的变化，自动重新构建，刷新浏览器</p>
      </li>
      <li>
        <p>代码校验：Eslint代码规范校验和检测、单元测试等</p>
      </li>
      <li>
        <p>自动发布：自动构建出线上发布代码并传输给发布系统</p>
      </li>
      <li>
        <p>跨域处理</p>
      </li>
      <li>
        <p>……</p>
      </li>
    </ul>
    <p><strong>除了webpack外，它们也可以做这些事情：</strong></p>
    <ul>
      <li>
        <p>grunt</p>
      </li>
      <li>
        <p>gulp</p>
      </li>
      <li>
        <p>Parcel</p>
      </li>
      <li>
        <p>vite</p>
      </li>
      <li>
        <p>rollup</p>
      </li>
      <li>
        <p>Turbopack</p>
      </li>
      <li>
        <p>......</p>
      </li>
    </ul>

    <hr>

    <h4>webpack的基础操作</h4>
    <p><strong>安装</strong></p>
    <pre class="prettyprint hljs-dark"><code class="hljs stata"><div class="hljs-line"><span class="hljs-comment">// 为防止全局安装webpack导致版本冲突，真实项目中以本地安装为主 </span>
</div><div class="hljs-line">$ npm init -<span class="hljs-built_in">y</span>
</div><div class="hljs-line">$ npm install webpack webpack-<span class="hljs-keyword">cli</span> --<span class="hljs-keyword">save</span>-dev
</div><div class="hljs-line">OR
</div><div class="hljs-line">$ yarn add webpack webpack-<span class="hljs-keyword">cli</span> -<span class="hljs-built_in">D</span>
</div></code></pre>

    <p><strong>零配置使用</strong></p>
    <pre class="prettyprint hljs-dark"><code class="hljs gams"><div class="hljs-line"><span class="hljs-comment">/*</span>
</div><div class="hljs-line"><span class="hljs-comment"> * 默认会打包SRC目录中的JS文件（入口默认index.js）</span>
</div><div class="hljs-line"><span class="hljs-comment"> * 打包完成的目录默认是DIST/MAIN.JS</span>
</div><div class="hljs-line"><span class="hljs-comment"> * webpack默认支持CommonJS和ES6 Module的模块规范，依此进行依赖打包</span>
</div><div class="hljs-line"><span class="hljs-comment"> */</span>
</div><div class="hljs-line"><span class="hljs-symbol">$</span> npx webpack
</div></code></pre>

    <p><strong>自定义基础配置</strong></p>
    <blockquote>
      <p>webpack.config.js</p>
    </blockquote>
    <pre class="prettyprint hljs-dark"><code class="hljs javascript"><div class="hljs-line"><span class="hljs-keyword">let</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">'path'</span>);
</div><div class="hljs-line"><span class="hljs-built_in">module</span>.exports = {
</div><div class="hljs-line">    <span class="hljs-comment">//=&gt;打包模式  开发环境development  生产环境production</span>
</div><div class="hljs-line">    mode: <span class="hljs-string">'production'</span>,
</div><div class="hljs-line">    <span class="hljs-comment">//=&gt;入口</span>
</div><div class="hljs-line">    entry: <span class="hljs-string">'./src/index.js'</span>,
</div><div class="hljs-line">    <span class="hljs-comment">//=&gt;输出</span>
</div><div class="hljs-line">    output: {
</div><div class="hljs-line">        <span class="hljs-comment">//=&gt;输出文件的文件名</span>
</div><div class="hljs-line">        filename: <span class="hljs-string">'bundle.[hash].js'</span>,
</div><div class="hljs-line">        <span class="hljs-comment">//=&gt;输出目录的"绝对路径"</span>
</div><div class="hljs-line">        path: path.resolve(__dirname, <span class="hljs-string">'dist'</span>)
</div><div class="hljs-line">    }
</div><div class="hljs-line">}
</div></code></pre>

    <p><strong>html-webpack-plugin</strong></p>
    <blockquote>
      <p><a href="https://www.webpackjs.com/plugins/html-webpack-plugin/"
          target="_blank">https://www.webpackjs.com/plugins/html-webpack-plugin/</a> <br>
        $ npm i html-webpack-plugin -–save-dev</p>
    </blockquote>
    <pre class="prettyprint hljs-dark"><code class="hljs javascript"><div class="hljs-line"><span class="hljs-keyword">let</span> HtmlWebpackPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">'html-webpack-plugin'</span>);
</div><div class="hljs-line"><span class="hljs-built_in">module</span>.exports = {
</div><div class="hljs-line">    ...,
</div><div class="hljs-line">    <span class="hljs-comment">//=&gt;在webpack中使用插件</span>
</div><div class="hljs-line">    plugins: [
</div><div class="hljs-line">        <span class="hljs-keyword">new</span> HtmlWebpackPlugin({
</div><div class="hljs-line">            <span class="hljs-comment">//=&gt;指定自己的模板</span>
</div><div class="hljs-line">            template: <span class="hljs-string">'./src/index.html'</span>,
</div><div class="hljs-line">            <span class="hljs-comment">//=&gt;输出的文件名</span>
</div><div class="hljs-line">            filename: <span class="hljs-string">'index.html'</span>,
</div><div class="hljs-line">            <span class="hljs-comment">//=&gt;给引入的文件设置HASH戳（清除缓存的），也可以在output中设置 filename: 'bundle.[hash].js' 来生成不同的文件</span>
</div><div class="hljs-line">            hash: <span class="hljs-literal">true</span>,
</div><div class="hljs-line">            <span class="hljs-comment">//=&gt;控制是否以及以何种方式最小化输出 </span>
</div><div class="hljs-line">            <span class="hljs-comment">//=&gt;https://github.com/kangax/html-minifier</span>
</div><div class="hljs-line">            minify: {
</div><div class="hljs-line">                <span class="hljs-attr">collapseWhitespace</span>: <span class="hljs-literal">true</span>,
</div><div class="hljs-line">                <span class="hljs-attr">removeComments</span>: <span class="hljs-literal">true</span>,
</div><div class="hljs-line">                <span class="hljs-attr">removeAttributeQuotes</span>: <span class="hljs-literal">true</span>,
</div><div class="hljs-line">                <span class="hljs-attr">removeEmptyAttributes</span>: <span class="hljs-literal">true</span>
</div><div class="hljs-line">            }
</div><div class="hljs-line">        })
</div><div class="hljs-line">    ]
</div><div class="hljs-line">}
</div></code></pre>

    <p><strong>clean-webpack-plugin</strong></p>
    <blockquote>
      <p>每一次打包之前，清除之前打包的内容 <br>
        $ npm i clean-webpack-plugin –save-dev</p>
    </blockquote>
    <pre class="prettyprint hljs-dark"><code class="hljs java"><div class="hljs-line"><span class="hljs-keyword">const</span> { CleanWebpackPlugin } = require(<span class="hljs-string">'clean-webpack-plugin'</span>);
</div><div class="hljs-line"><span class="hljs-keyword">module</span>.<span class="hljs-keyword">exports</span>={
</div><div class="hljs-line">    plugins:[
</div><div class="hljs-line">        <span class="hljs-keyword">new</span> CleanWebpackPlugin()
</div><div class="hljs-line">    ]
</div><div class="hljs-line">};
</div></code></pre>

    <p><strong>webpack-dev-server</strong></p>
    <blockquote>
      <p><a href="https://webpack.js.org/configuration/dev-server/"
          target="_blank">https://webpack.js.org/configuration/dev-server/</a> <br>
        $ npm install webpack-dev-server –save-dev</p>
    </blockquote>
    <pre class="prettyprint hljs-dark"><code class="hljs groovy"><div class="hljs-line"><span class="hljs-comment">/* webpack.config.js */</span>
</div><div class="hljs-line"><span class="hljs-comment">//=&gt;配置DEV-SERVER</span>
</div><div class="hljs-line"><span class="hljs-string">devServer:</span> {
</div><div class="hljs-line">    <span class="hljs-comment">//=&gt;端口</span>
</div><div class="hljs-line"><span class="hljs-symbol">    port:</span> <span class="hljs-number">3000</span>,
</div><div class="hljs-line"><span class="hljs-symbol">    host:</span> <span class="hljs-string">'127.0.0.1'</span>,
</div><div class="hljs-line">    <span class="hljs-comment">//=&gt;开启GZIP压缩</span>
</div><div class="hljs-line"><span class="hljs-symbol">    compress:</span><span class="hljs-literal">true</span>,
</div><div class="hljs-line">    <span class="hljs-comment">//=&gt;显示编译进度</span>
</div><div class="hljs-line"><span class="hljs-symbol">    progress:</span> <span class="hljs-literal">true</span>,
</div><div class="hljs-line">    <span class="hljs-comment">//=&gt;指定访问资源目录</span>
</div><div class="hljs-line"><span class="hljs-symbol">    contentBase:</span> path.resolve(__dirname, <span class="hljs-string">"dist"</span>),
</div><div class="hljs-line">    <span class="hljs-comment">//=&gt;自动打开浏览器</span>
</div><div class="hljs-line"><span class="hljs-symbol">    open:</span> <span class="hljs-literal">true</span>,
</div><div class="hljs-line">    <span class="hljs-comment">//=&gt;开启热更新</span>
</div><div class="hljs-line"><span class="hljs-symbol">    hot:</span><span class="hljs-literal">true</span>,
</div><div class="hljs-line">    <span class="hljs-comment">//=&gt;请求代理</span>
</div><div class="hljs-line"><span class="hljs-symbol">    proxy:</span>{
</div><div class="hljs-line">       <span class="hljs-string">"/"</span>:{
</div><div class="hljs-line"><span class="hljs-symbol">          target:</span><span class="hljs-string">"http://localhost:8888"</span>, 
</div><div class="hljs-line"><span class="hljs-symbol">          secure:</span> <span class="hljs-literal">false</span>, <span class="hljs-comment">//若为true则表示是https，false是http</span>
</div><div class="hljs-line"><span class="hljs-symbol">          changeOrigin:</span> <span class="hljs-literal">true</span> <span class="hljs-comment">//把请求头当中的host值改成服务器地址</span>
</div><div class="hljs-line">       } 
</div><div class="hljs-line">    }
</div><div class="hljs-line">}
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">/* package.json */</span>
</div><div class="hljs-line"><span class="hljs-string">"scripts"</span>: {
</div><div class="hljs-line">    <span class="hljs-string">"serve"</span>: <span class="hljs-string">"webpack server"</span>,
</div><div class="hljs-line">    <span class="hljs-string">"build"</span>: <span class="hljs-string">"webpack"</span>
</div><div class="hljs-line">}
</div></code></pre>

    <p><strong>多入口 &amp; 多出口</strong></p>
    <pre class="prettyprint hljs-dark"><code class="hljs javascript"><div class="hljs-line"><span class="hljs-keyword">const</span> htmlPlugins = [<span class="hljs-string">'index'</span>, <span class="hljs-string">'login'</span>].map(<span class="hljs-function"><span class="hljs-params">chunk</span> =&gt;</span> {
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> HtmlWebpackPlugin({
</div><div class="hljs-line">        <span class="hljs-attr">template</span>: <span class="hljs-string">`./<span class="hljs-subst">${chunk}</span>.html`</span>,
</div><div class="hljs-line">        <span class="hljs-attr">filename</span>: <span class="hljs-string">`<span class="hljs-subst">${chunk}</span>.html`</span>,
</div><div class="hljs-line">        <span class="hljs-attr">hash</span>: <span class="hljs-literal">true</span>,
</div><div class="hljs-line">        <span class="hljs-attr">chunks</span>:[chunk,<span class="hljs-string">'jquery'</span>],
</div><div class="hljs-line">        <span class="hljs-attr">minify</span>: {
</div><div class="hljs-line">           <span class="hljs-attr">collapseWhitespace</span>: <span class="hljs-literal">true</span>,
</div><div class="hljs-line">           <span class="hljs-attr">removeComments</span>: <span class="hljs-literal">true</span>,
</div><div class="hljs-line">           <span class="hljs-attr">removeAttributeQuotes</span>: <span class="hljs-literal">true</span>,
</div><div class="hljs-line">           <span class="hljs-attr">removeEmptyAttributes</span>: <span class="hljs-literal">true</span>
</div><div class="hljs-line">       }
</div><div class="hljs-line">   });
</div><div class="hljs-line">});
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-built_in">module</span>.exports={
</div><div class="hljs-line">    <span class="hljs-attr">entry</span>: {
</div><div class="hljs-line">        <span class="hljs-attr">index</span>: <span class="hljs-string">"./src/index.js"</span>,
</div><div class="hljs-line">        <span class="hljs-attr">login</span>: <span class="hljs-string">"./src/login.js"</span>,
</div><div class="hljs-line">        <span class="hljs-attr">jquery</span>:<span class="hljs-string">"./src/jquery.js"</span>
</div><div class="hljs-line">    },
</div><div class="hljs-line">    <span class="hljs-attr">output</span>: {
</div><div class="hljs-line">        <span class="hljs-attr">filename</span>: <span class="hljs-string">"[name].[hash].js"</span>,
</div><div class="hljs-line">        <span class="hljs-attr">path</span>: path.resolve(__dirname, <span class="hljs-string">"dist"</span>)
</div><div class="hljs-line">    },
</div><div class="hljs-line">    <span class="hljs-attr">plugins</span>:[
</div><div class="hljs-line">        ...htmlPlugins
</div><div class="hljs-line">    ]
</div><div class="hljs-line">};
</div></code></pre>

    <h4>webpack中的加载器loader：处理样式的</h4>
    <blockquote>
      <p>$ npm i css-loader style-loader less less-loader autoprefixer postcss-loader –save-dev</p>
    </blockquote>
    <pre class="prettyprint hljs-dark"><code class="hljs dts"><div class="hljs-line">module.exports = {
</div><div class="hljs-line">    <span class="hljs-comment">//=&gt;配置模块加载器LOADER</span>
</div><div class="hljs-line"><span class="hljs-symbol">    module:</span> {
</div><div class="hljs-line">        <span class="hljs-comment">//=&gt;模块规则：使用加载器（默认从右向左执行，从下向上）</span>
</div><div class="hljs-line"><span class="hljs-symbol">        rules:</span> [{
</div><div class="hljs-line"><span class="hljs-symbol">            test:</span> /\.(css|less)$/, <span class="hljs-comment">//=&gt;基于正则匹配哪些模块需要处理</span>
</div><div class="hljs-line"><span class="hljs-symbol">            use:</span> [
</div><div class="hljs-line">                <span class="hljs-string">"style-loader"</span>, <span class="hljs-comment">//=&gt;把CSS插入到HEAD中</span>
</div><div class="hljs-line">                <span class="hljs-string">"css-loader"</span>, <span class="hljs-comment">//=&gt;编译解析@import/URL()这种语法</span>
</div><div class="hljs-line">                <span class="hljs-string">"postcss-loader"</span>, <span class="hljs-comment">//=&gt;设置前缀</span>
</div><div class="hljs-line">                {
</div><div class="hljs-line"><span class="hljs-symbol">                    loader:</span> <span class="hljs-string">"less-loader"</span>,
</div><div class="hljs-line"><span class="hljs-symbol">                    options:</span> {
</div><div class="hljs-line">                        <span class="hljs-comment">//=&gt;加载器额外的配置</span>
</div><div class="hljs-line">                    }
</div><div class="hljs-line">                }
</div><div class="hljs-line">            ]
</div><div class="hljs-line">        }]
</div><div class="hljs-line">    }
</div><div class="hljs-line">}
</div></code></pre>
    <p>postcss.config.js</p>
    <pre class="prettyprint hljs-dark"><code class="hljs coffeescript"><div class="hljs-line"><span class="hljs-built_in">module</span>.exports = {
</div><div class="hljs-line">    plugins: [
</div><div class="hljs-line">        <span class="hljs-built_in">require</span>(<span class="hljs-string">'autoprefixer'</span>)
</div><div class="hljs-line">    ]
</div><div class="hljs-line">};
</div></code></pre>
    <p>package.json</p>
    <pre class="prettyprint hljs-dark"><code class="hljs awk"><div class="hljs-line"><span class="hljs-regexp">//</span> https:<span class="hljs-regexp">//gi</span>thub.com<span class="hljs-regexp">/browserslist/</span>browserslist
</div><div class="hljs-line"><span class="hljs-string">"browserslist"</span>: [
</div><div class="hljs-line">    <span class="hljs-string">"&gt; 1%"</span>,
</div><div class="hljs-line">    <span class="hljs-string">"last 2 versions"</span>
</div><div class="hljs-line">]
</div></code></pre>
    <p><strong>mini-css-extract-plugin 抽离CSS内容</strong></p>
    <blockquote>
      <p><a href="https://www.npmjs.com/package/mini-css-extract-plugin"
          target="_blank">https://www.npmjs.com/package/mini-css-extract-plugin</a> <br>
        $ npm i mini-css-extract-plugin –save-dev</p>
    </blockquote>
    <pre class="prettyprint hljs-dark"><code class="hljs typescript"><div class="hljs-line"><span class="hljs-keyword">const</span> MiniCssExtractPlugin=<span class="hljs-built_in">require</span>(<span class="hljs-string">'mini-css-extract-plugin'</span>);
</div><div class="hljs-line"><span class="hljs-built_in">module</span>.exports = {
</div><div class="hljs-line">    plugins: [
</div><div class="hljs-line">        <span class="hljs-comment">//=&gt;使用插件</span>
</div><div class="hljs-line">        <span class="hljs-keyword">new</span> MiniCssExtractPlugin({
</div><div class="hljs-line">            <span class="hljs-comment">//=&gt;设置编译后的文件名字</span>
</div><div class="hljs-line">            filename: <span class="hljs-string">'main.[hash].css'</span>
</div><div class="hljs-line">        })
</div><div class="hljs-line">    ],
</div><div class="hljs-line">    <span class="hljs-keyword">module</span>: {
</div><div class="hljs-line">        rules: [{
</div><div class="hljs-line">            test: <span class="hljs-regexp">/\.(css|less)$/</span>,
</div><div class="hljs-line">            use: [
</div><div class="hljs-line">                <span class="hljs-comment">// "style-loader",</span>
</div><div class="hljs-line">                <span class="hljs-comment">//=&gt;使用插件中的LOADER代替STYLE方式</span>
</div><div class="hljs-line">                MiniCssExtractPlugin.loader,
</div><div class="hljs-line">                <span class="hljs-string">"css-loader"</span>,
</div><div class="hljs-line">                <span class="hljs-string">"postcss-loader"</span>,
</div><div class="hljs-line">                <span class="hljs-string">"less-loader"</span>
</div><div class="hljs-line">            ]
</div><div class="hljs-line">        }]
</div><div class="hljs-line">    }
</div><div class="hljs-line">}
</div></code></pre>

    <h4>设置优化项压缩CSS/JS</h4>
    <blockquote>
      <p>$ npm i css-minimizer-webpack-plugin terser-webpack-plugin –save-dev</p>
    </blockquote>
    <pre class="prettyprint hljs-dark"><code class="hljs javascript"><div class="hljs-line"><span class="hljs-keyword">const</span> UglifyjsWebpackPlugin=<span class="hljs-built_in">require</span>(<span class="hljs-string">'uglifyjs-webpack-plugin'</span>);
</div><div class="hljs-line"><span class="hljs-keyword">const</span> TerserPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">'terser-webpack-plugin'</span>);
</div><div class="hljs-line"><span class="hljs-keyword">const</span> CssMinimizerWebpackPlugin= <span class="hljs-built_in">require</span>(<span class="hljs-string">'css-minimizer-webpack-plugin'</span>);
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-built_in">module</span>.exports = {
</div><div class="hljs-line">    <span class="hljs-comment">//=&gt;设置优化项</span>
</div><div class="hljs-line">    optimization: {
</div><div class="hljs-line">        <span class="hljs-comment">//=&gt;设置压缩方式</span>
</div><div class="hljs-line">        minimizer: [
</div><div class="hljs-line">            <span class="hljs-comment">//=&gt;压缩CSS（但是必须指定JS的压缩方式）</span>
</div><div class="hljs-line">            <span class="hljs-keyword">new</span> CssMinimizerWebpackPlugin(),
</div><div class="hljs-line">            <span class="hljs-comment">//=&gt;压缩JS</span>
</div><div class="hljs-line">            <span class="hljs-comment">//new UglifyjsWebpackPlugin({</span>
</div><div class="hljs-line">                <span class="hljs-comment">//cache: true, //=&gt;是否使用缓存</span>
</div><div class="hljs-line">                <span class="hljs-comment">//parallel: true, //=&gt;是否是并发编译</span>
</div><div class="hljs-line">                <span class="hljs-comment">//sourceMap: true, //=&gt;启动源码映射（方便调试）</span>
</div><div class="hljs-line">            <span class="hljs-comment">//}),</span>
</div><div class="hljs-line">            <span class="hljs-keyword">new</span> TerserPlugin()
</div><div class="hljs-line">        ]
</div><div class="hljs-line">    }
</div><div class="hljs-line">};
</div></code></pre>

    <h4>基于babel实现ES6的转换</h4>
    <blockquote>
      <p><a href="https://babeljs.io/" target="_blank">https://babeljs.io/</a> <br>
        <span>$</span> npm i babel-loader @babel/preset-env –save-dev <br>
        $ npm i @babel/polyfill
      </p>
    </blockquote>
    <pre class="prettyprint hljs-dark"><code class="hljs gradle"><div class="hljs-line">module.exports = {
</div><div class="hljs-line">    module: {
</div><div class="hljs-line">        rules: [{
</div><div class="hljs-line">            test: <span class="hljs-regexp">/\.js$/</span>,
</div><div class="hljs-line">            use: [{
</div><div class="hljs-line">                loader: <span class="hljs-string">'babel-loader'</span>,
</div><div class="hljs-line">                <span class="hljs-keyword">options</span>: {
</div><div class="hljs-line">                    <span class="hljs-comment">//=&gt;转换的语法预设（ES6-&gt;ES5）</span>
</div><div class="hljs-line">                    presets: [
</div><div class="hljs-line">                        <span class="hljs-string">"@babel/preset-env"</span>
</div><div class="hljs-line">                    ],
</div><div class="hljs-line">                }
</div><div class="hljs-line">            }],
</div><div class="hljs-line">            <span class="hljs-comment">//=&gt;设置编译时忽略的文件和指定编译目录</span>
</div><div class="hljs-line">            <span class="hljs-keyword">include</span>: path.resolve(__dirname, <span class="hljs-string">'src'</span>),
</div><div class="hljs-line">            <span class="hljs-keyword">exclude</span>: <span class="hljs-regexp">/node_modules/</span>
</div><div class="hljs-line">        }]
</div><div class="hljs-line">    }
</div><div class="hljs-line">}
</div></code></pre>
  </div>
</body>

</html>